import cx from 'classnames';
import PropTypes from 'prop-types';
import Slider from 'rc-slider';
import React, { PureComponent } from 'react';
import { Button } from 'app/components/Buttons';
import Modal from 'app/components/Modal';
import Space from 'app/components/Space';
import { ToastNotification } from 'app/components/Notifications';
import { Form, Input, Textarea } from 'app/components/Validation';
import FormGroup from 'app/components/FormGroup';
import i18n from 'app/lib/i18n';
import * as validations from 'app/lib/validations';
import styles from '../form.styl';

class UpdateRecord extends PureComponent {
    static propTypes = {
      state: PropTypes.object,
      action: PropTypes.object
    };

    slider = null;

    get value() {
      const {
        name,
        command
      } = this.form.getValues();

      return {
        name: name,
        command: command,
        grid: {
          xs: this.slider.state.value
        }
      };
    }

    render() {
      const { state, action } = this.props;
      const { modal } = state;
      const {
        alertMessage,
        name,
        command,
        grid
      } = modal.params;

      return (
        <Modal
          disableOverlay
          size="sm"
          onClose={action.closeModal}
        >
          <Modal.Header>
            <Modal.Title>
              {i18n._('Custom Commands')}
              <Space width="8" />
                        &rsaquo;
              <Space width="8" />
              {i18n._('Update')}
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            {alertMessage && (
              <ToastNotification
                style={{ margin: '-16px -24px 10px -24px' }}
                type="error"
                onDismiss={() => {
                  action.updateModalParams({ alertMessage: '' });
                }}
              >
                {alertMessage}
              </ToastNotification>
            )}
            <Form
              ref={node => {
                this.form = node;
              }}
              onSubmit={(event) => {
                event.preventDefault();
              }}
            >
              <div className={styles.formFields}>
                <FormGroup>
                  <label>{i18n._('Name')}</label>
                  <Input
                    type="text"
                    name="name"
                    value={name}
                    className={cx(
                      'form-control',
                      styles.formControl,
                      styles.short
                    )}
                    validations={[validations.required]}
                  />
                </FormGroup>
                <FormGroup>
                  <label>{i18n._('Command')}</label>
                  <Textarea
                    name="command"
                    value={command}
                    rows="5"
                    className={cx(
                      'form-control',
                      styles.formControl,
                      styles.long
                    )}
                    validations={[validations.required]}
                  />
                </FormGroup>
                <FormGroup>
                  <label>{i18n._('Button Width')}</label>
                  <Slider
                    ref={node => {
                      this.slider = node;
                    }}
                    dots
                    marks={{
                      1: (<span><sup>1</sup>/<sub>12</sub></span>),
                      2: (<span><sup>1</sup>/<sub>6</sub></span>),
                      3: (<span><sup>1</sup>/<sub>4</sub></span>),
                      4: (<span><sup>1</sup>/<sub>3</sub></span>),
                      5: (<span><sup>5</sup>/<sub>12</sub></span>),
                      6: (<span><sup>1</sup>/<sub>2</sub></span>),
                      7: (<span><sup>7</sup>/<sub>12</sub></span>),
                      8: (<span><sup>2</sup>/<sub>3</sub></span>),
                      9: (<span><sup>3</sup>/<sub>4</sub></span>),
                      10: (<span><sup>5</sup>/<sub>6</sub></span>),
                      11: (<span><sup>11</sup>/<sub>12</sub></span>),
                      12: '100%'
                    }}
                    included={false}
                    defaultValue={grid.xs}
                    min={1}
                    max={12}
                    step={1}
                  />
                </FormGroup>
              </div>
            </Form>
          </Modal.Body>
          <Modal.Footer>
            <Button
              btnStyle="default"
              onClick={action.closeModal}
            >
              {i18n._('Cancel')}
            </Button>
            <Button
              btnStyle="primary"
              onClick={() => {
                this.form.validate(err => {
                  if (err) {
                    return;
                  }

                  const { id } = modal.params;
                  const { name, command, grid } = this.value;

                  action.updateRecord(id, { name, command, grid });
                });
              }}
            >
              {i18n._('OK')}
            </Button>
          </Modal.Footer>
        </Modal>
      );
    }
}

export default UpdateRecord;
